import 'package:flutter/material.dart';
import 'package:left_scroll_actions/cupertinoLeftScroll.dart';
import 'package:left_scroll_actions/leftScroll.dart';

class LeftScrollActions extends StatefulWidget {
  const LeftScrollActions({ Key key }) : super(key: key);

  @override
  _LeftScrollActionsState createState() => _LeftScrollActionsState();
}

class _LeftScrollActionsState extends State<LeftScrollActions>
    with SingleTickerProviderStateMixin {
   AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(vsync: this);
  }

  @override
  void dispose() {
    super.dispose();
    _controller.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('LeftScrollActions')),
      body: ListView(
          children: <Widget>[
            Container(
              padding: EdgeInsets.all(12),
              child: MaterialButton(
                color: Colors.blue,
                child: Text(
                  'ListView Usage Demo',
                  style: TextStyle(color: Colors.white),
                ),
                onPressed: () {
                 
                },
              ),
            ),
            // Container(
            //   padding: EdgeInsets.all(12),
            //   child: MaterialButton(
            //     color: Colors.blue,
            //     child: Text(
            //       'ClosableListView Usage Demo',
            //       style: TextStyle(color: Colors.white),
            //     ),
            //     onPressed: () {
            //       Navigator.of(context).push(MaterialPageRoute(
            //         builder: (context) => ClosableListPage(),
            //       ));
            //     },
            //   ),
            // ),
            Container(height: 50),
            Container(
              padding: EdgeInsets.only(top: 12, left: 8, bottom: 8),
              child: Text('These widget can scroll to actions.'),
            ),
            LeftScroll(
              buttonWidth: 80,
              child: Container(
                height: 60,
                color: Colors.white,
                alignment: Alignment.center,
                child: Text('👈 Try Scroll Left'),
              ),
              buttons: <Widget>[
                LeftScrollItem(
                  text: 'delete',
                  color: Colors.red,
                  onTap: () {
                    print('delete');
                  },
                ),
                LeftScrollItem(
                  text: 'Edit',
                  color: Colors.orange,
                  onTap: () {
                    print('edit');
                  },
                ),
              ],
              onTap: () {
                print('tap row');
              },
            ),

            LeftScroll(
              child: Container(
                height: 60,
                color: Colors.white.withOpacity(0.8),
                alignment: Alignment.center,
                child: Text('If opacity is not 1.0,may cause problem.'),
              ),
              buttons: <Widget>[
                LeftScrollItem(
                  text: 'delete',
                  color: Colors.red,
                ),
                LeftScrollItem(
                  text: 'Edit',
                  color: Colors.orange,
                ),
              ],
            ),
            Container(
              padding: EdgeInsets.only(top: 12, left: 8, bottom: 8),
              child: Text('CupertinoLeftScrollRow'),
            ),
            CupertinoLeftScroll(
              buttonWidth: 60,
              child: Container(
                height: 60,
                color: Colors.white,
                alignment: Alignment.center,
                child: Text('👈 Try Scroll Left(iOS style)'),
              ),
              buttons: <Widget>[
                LeftScrollItem(
                  text: 'Delete',
                  color: Colors.red,
                  onTap: () {
                    print('delete');
                  },
                ),
                LeftScrollItem(
                  text: 'Edit',
                  color: Colors.orange,
                  onTap: () {
                    print('edit');
                  },
                ),
              ],
              onTap: () {
                print('tap row');
              },
            ),
            CupertinoLeftScroll(
              buttonWidth: 60,
              bounce: true,
              child: Container(
                height: 60,
                color: Colors.white,
                alignment: Alignment.center,
                child: Text('👈 Try Scroll Left(iOS style with bounce)'),
              ),
              buttons: <Widget>[
                LeftScrollItem(
                  text: 'Delete',
                  color: Colors.red,
                  onTap: () {
                    print('delete');
                  },
                ),
                LeftScrollItem(
                  text: 'Edit',
                  color: Colors.orange,
                  onTap: () {
                    print('edit');
                  },
                ),
              ],
              onTap: () {
                print('tap row');
              },
            ),
            CupertinoLeftScroll(
              opacityChange: true,
              buttonWidth: 80,
              child: Container(
                height: 60,
                color: Colors.white,
                alignment: Alignment.center,
                child: Text('👈 Try iOS style with opa change'),
              ),
              buttons: <Widget>[
                LeftScrollItem(
                  text: 'delete',
                  textColor: Colors.red,
                  color: Colors.red.withOpacity(0),
                  onTap: () {
                    print('delete');
                  },
                ),
                LeftScrollItem(
                  text: 'Edit',
                  textColor: Colors.orange,
                  color: Colors.orange.withOpacity(0),
                  onTap: () {
                    print('edit');
                  },
                ),
              ],
              onTap: () {
                print('tap row');
              },
            ),
            Container(height: 50),
            Container(
              padding: EdgeInsets.only(top: 12, left: 8, bottom: 8),
              child:
                  Text('You can build widget like this if opacity is not 1.0.'),
            ),
            ExampleRow(
              onDelete: () {
                print('delete');
              },
              onTap: () {
                print('tap');
              },
              onEdit: () {
                print('edit');
              },
            ),
          ],
        ));
  
      
    
  }
}


// 如果Row的背景必须是透明颜色的，就要做处理了：
class ExampleRow extends StatefulWidget {
  final Function onTap;
  final Function onEdit;
  final Function onDelete;

  const ExampleRow({
    Key key,
    this.onTap,
    this.onDelete,
    this.onEdit,
  }) : super(key: key);

  @override
  _ExampleRowState createState() => _ExampleRowState();
}

class _ExampleRowState extends State<ExampleRow> {
  double opa = 0;
  @override
  Widget build(BuildContext context) {
    Widget myDeviceStatus = Icon(Icons.supervised_user_circle);
    Widget body = Container(
      padding: EdgeInsets.fromLTRB(12, 0, 0, 0),
      height: 92,
      width: double.infinity,
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          Expanded(
            child: Container(
              height: 66,
              width: 66,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(33),
              ),
              child: Placeholder(),
            ),
          ),
          Container(
            width: 44,
            height: double.infinity,
            child: Opacity(
              opacity: 1 - opa,
              child: Center(
                child: myDeviceStatus,
              ),
            ),
          )
        ],
      ),
    );

    List<Widget> actions = [
      Opacity(
        opacity: opa,
        child: Tapped(
          child: Container(
            color: Colors.white.withOpacity(0),
            alignment: Alignment.center,
            padding: EdgeInsets.all(20),
            child: Icon(Icons.delete, color: Colors.red),
          ),
          onTap: widget.onDelete,
        ),
      ),
      Opacity(
        opacity: opa,
        child: Tapped(
          child: Container(
            color: Colors.white.withOpacity(0),
            alignment: Alignment.center,
            padding: EdgeInsets.all(20),
            child: Icon(Icons.edit, color: Colors.blue),
          ),
          onTap: widget.onDelete,
        ),
      ),
    ];

    body = LeftScroll(
      child: body,
      buttonWidth: 70,
      buttons: actions,
      onTap: widget.onTap,
      onScroll: (a) {
        opa = a;
        setState(() {});
        print(a);
      },
      onSlideStarted: () {
        setState(() {});
      },
      onSlideCompleted: () {
        opa = 1;
        setState(() {});
      },
      onSlideCanceled: () {
        opa = 0;
        setState(() {});
      },
    );

    return body;
  }
}

class OVText {
  // 偏大文字
  static Widget main(title,
      {double fontsize, Color color, TextAlign align: TextAlign.left}) {
    return Text(
      title,
      maxLines: 1,
      textAlign: align,
      style: TextStyle(
        decoration: TextDecoration.combine([]),
        textBaseline: TextBaseline.alphabetic,
        fontSize: fontsize ?? 20,
        fontWeight: FontWeight.normal,
        // color: color ?? Colors.white,
      ),
    );
  }

  //  正文
  static Widget normal(title,
      {double fontsize: 14, Color color, TextAlign align: TextAlign.left}) {
    return Text(
      title,
      textAlign: align,
      style: TextStyle(
        fontSize: fontsize,
        decoration: TextDecoration.combine([]),
        // color: color ?? Colors.white,
      ),
    );
  }

  // 小提示文字
  static Widget small(title,
      {double fontsize: 12, TextAlign align: TextAlign.left}) {
    return Opacity(
      opacity: 0.8,
      child: Text(
        title,
        maxLines: 1,
        textAlign: align,
        style: TextStyle(
          fontSize: fontsize,
          decoration: TextDecoration.combine([]),
          // color: Colors.white,
        ),
      ),
    );
  }
}



class Tapped extends StatefulWidget {
  Tapped({this.child, this.onTap});
  final Widget child;
  final Function onTap;
  @override
  _TappedState createState() => _TappedState();
}

class _TappedState extends State<Tapped> with TickerProviderStateMixin {
  bool isChangeAlpha = false;
  double alpha;

  AnimationController controller;
  Animation animation;

  @override
  void initState() {
    controller = AnimationController(value: 1, vsync: this);
    animation = CurvedAnimation(
      parent: controller,
      curve: Curves.easeInOutCubic,
    );
    // animation.addStatusListener((status) {
    //   if (status == AnimationStatus.completed) {
    //     controller.reverse();
    //   }
    // });
    super.initState();
  }

  bool tapDown = false;

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    Duration duration = const Duration(milliseconds: 50);
    Duration showDuration = const Duration(milliseconds: 660);
    animation.addListener(() {
      this.setState(() {});
    });
    return GestureDetector(
      onTap: () async {
        if (widget.onTap != null) {
          await Future.delayed(Duration(milliseconds: 100));
          widget.onTap();
        }
      },
      onTapDown: (detail) async {
        tapDown = true;
        isChangeAlpha = true;
        await controller.animateTo(0.4, duration: duration);
        if (!tapDown) {
          await controller.animateTo(1, duration: showDuration);
        }
        tapDown = false;
        isChangeAlpha = false;
      },
      onTapUp: (detail) async {
        tapDown = false;
        if (isChangeAlpha == true) {
          return;
        }
        await controller.animateTo(1, duration: showDuration);
        isChangeAlpha = false;
      },
      onTapCancel: () async {
        tapDown = false;
        controller.value = 1;
        isChangeAlpha = false;
      },
      child: Opacity(
        opacity: animation.value,
        child: widget.child,
      ),
    );
  }
}